/*页面底部统一操作/返回按钮 组件*/
<template>
  <div
    class="bottom-operation-wrapper"
    :style="wrapperStyleName"
  >
    <div class="btn-box">
      <el-button
        v-if="showSaveBtn"
        type="primary"
        size="small"
        @click="handleSure"
      >{{ saveBtnText }}</el-button>
      <el-button
        size="small"
        @click="handleEmpty"
      >返 回</el-button>
    </div>
  </div>
</template>
<script>
import { debounce } from 'lodash'
export default {
  props: {
    showSaveBtn: { // 是否展示保存btn
      type: Boolean,
      default: true
    },
    saveBtnText: {
      type: String,
      default: '保 存'
    },
    backListUrl: {
      // 需要返回的列表页
      type: String,
      default: ''
    }
    // @cancelClick 返回按钮事件回调方法
  },
  data() {
    return {
      getLeftMeunW: 240
    }
  },
  computed: {
    wrapperStyleName() {
      return {
        marginLeft: `${this.getLeftMeunW}px`,
        paddingRight: `${this.getLeftMeunW}px`

      }
    }
  },
  watch: {
    '$store.getters.isCollapse': {
      handler: function(newVal, oldVal) {
        this.$nextTick(() => {
          setTimeout(() => {
            let avueLeftDom = document.getElementById('avueLeft')
            this.getLeftMeunW = avueLeftDom && avueLeftDom.offsetWidth ? avueLeftDom.offsetWidth : 240
          }, 300)
        })
      },
      immediate: true
    }
  },
  methods: {
    handleSure: debounce(function() {
      this.$emit('saveClick')
    }, 500),
    handleEmpty() {
      if (this.$listeners['cancelClick']) {
        this.$emit('cancelClick')
      } else {
        if (this.backListUrl) {
          this.$router.push(this.backListUrl)
          return
        }
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-operation-wrapper {
  left: 0;
  display: flex;
  justify-content: flex-end;
  z-index: 99;
  width: 100%;
  margin-left: 240px;
  box-sizing: border-box;
  padding: 8px 240px 8px 8px;
  margin-right: 20px;
  background: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  // box-shadow: 5px -5px 14px 4px rgb(0 0 0 / 10%);
  transition: all 0.3s;
  .btn-box {
    margin-right: 10px;
  }
}
</style>
